<template>
  <div class="big">
    <!-- 顶部栏 -->
    <div class="shoutop">
      <!-- 地图 -->
      <div class="shoutopleft">
        <van-image
        @click="imgtopbtn"
  width="40px"
  height="40px"
  :src="require('../assets/a586f5ee1159fba73a6cb5075b7cc5d.png')"
/>
      </div>
      <!-- 搜索框 -->
      <div class="shoutopcenter">
        <van-search
        show-action
        background="#29a8e3"
        style="height:98% ;width:260px" v-model="value" placeholder="请输入搜索关键词">
        <template #action>
    <div style="color:#fff; background-color:#29a8e3" @click="onSearch">搜索</div>
  </template>
      </van-search>
      <!-- <van-search
  v-model="value"
  show-action
  background="#29a8e3"
  style="height:98% ;width:260px"
  label="地址"
  placeholder="请输入搜索关键词"
  @search="onSearch"
>
  <template #action>
    <div style="color:#fff" @click="onSearch">搜索</div>
  </template>
</van-search> -->
      <!-- <div class="sousuobatn">1</div> -->
      </div>
      <!-- 客服 -->
       <div class="shoutopright">
        <van-image
        @click="imgtopbtn3"
  width="40px"
  height="40px"
  :src="require('../assets/44e64cfd3dc8ca2b04db7b96270648f.png')"
/>
      </div>
    </div>
    <!-- 中部内容 -->
    <div class="shoucenter">
       <!-- 轮播图 -->
       <div class="picedhuadong" >
        <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
  <van-swipe-item>
    <van-image
    @click="tiaozhuan"
  width="100%"
  height="100%"
  fit
  :src="require('../assets/3ac13ffb26f91f44ea0507821b385cd.jpg')"
/>
  </van-swipe-item>
  <van-swipe-item>
     <van-image
  width="100%"
  height="200px"
  fit
  @click="congqinbtn"
  :src="require('../assets/7c372df65caff2c3f5381757c7031b3.jpg')"
/></van-swipe-item>
  <van-swipe-item>
    <van-image
  width="96%"
  height="200px"
  fit
  :src="require('../assets/f648e8765e0aa72ab01f81da06f67e7.png')"
/>
  </van-swipe-item>
  <van-swipe-item>
    <van-image
  width="100%"
  height="200px"
  fit
  :src="require('../assets/722b442ae62ff545cca32c054fcae6b.jpg')"
/>
  </van-swipe-item>
</van-swipe>
      </div>
      <!-- icon模块 -->
      <div>
        <van-tabs v-model="active">
  <van-tab title="基本服务">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>
    <van-image
  width="100%"
  height="100%"
  :src="require('../assets/a5b6495c999f7c090a4135b38b6200c.png')"
/>
  </van-swipe-item>
  <van-swipe-item>
    <van-image
  width="100%"
  height="100%"
  :src="require('../assets/d4212bc1550ace3c1cea79a1987ed76.png')"
/>
  </van-swipe-item>

</van-swipe>
  </van-tab>
  <van-tab title="日常服务">
    <van-image
  width="95%"
  height="100%"
  class="weiwei1"
  :src="require('../assets/062cc5c93917dd8958f287490659049.png')"
/>
  </van-tab>
</van-tabs>
      </div>

   <div class="qiyezhaozhu">
    <div class="qiyezhaozhuleft">招租信息</div>
    <div @click="genduoremen" class="qiyezhaozhuright">更多></div>
  </div>
  <!-- 招租信息 -->
  <div class="qiyezhaozhuxinxi">
    <van-image
  width="100%"
  height="100%"
  :src="require('../assets/a3c473d36a9e6ea167236f5090ce1d5.png')"
/>

  </div>
  <!-- 活动专区 -->
  <div class="qiyehuodongxinxi">
    <div class="qiyehuodongxinxileft">活动专区</div>
    <div @click="genduoremen"  class="qiyehuodongxinxiright">更多></div>
  </div>
  <div style="margin-top: 8px;">
    <van-image
  width="100%"
  height="100%"
  :src="require('../assets/102c0eef509f47be43871b075ce87c7.png')"
/>
  </div>
    </div>
    <!-- 底部栏 -->
    <div class="shoubom">
      <!-- 首页 -->
      <div class="shoubomone">
        <van-image
  width="50px"
  height="50px"
  :src="require('../assets/331b986c42695e2c352558634dc0a8a.png')"
  @click="oneshouye"
/>
      </div>
      <!-- 政府 -->
      <div class="shoubomone">
        <van-image
  width="50px"
  height="50px"
  :src="require('../assets/40c6fc5740c03ee35c2d1402565766b.png')"
  @click="twozhengfu"
/>

      </div>
      <!-- 企业 -->
      <div class="shoubomone">
        <van-image
  width="50px"
  height="50px"
  :src="require('../assets/aa2f8eda49c8c125f92b2860095045b.png')"
  @click="threeqiyefuwu"
/>
      </div>
      <!-- 人才 -->
      <div class="shoubomone">
        <van-image
  width="50px"
  height="50px"
  :src="require('../assets/4ed1dffe89465dfb99f7f2bea8841b4.png')"
  @click="fourpepo"
/>
      </div>
      <!-- 我的 -->
      <div class="shoubomone" >
        <van-image
  width="50px"
  height="50px"
  :src="require('../assets/d07ef2fa1a4dd93160cc9aa6a2dca00.png')"
  @click="fivemy"
/>
      </div>
    </div>
  </div>
</template>
<script>
import { Notify, Dialog } from 'vant'
export default {
  name: '',
  data () {
    return {
      value: '',
      active: '2'
    }
  },
  methods: {
    imgtopbtn () {
      Notify('不好意思~~,此功能正在开发中')
    },
    //  this.$router.push('/kefyliaotian')
    imgtopbtn3 () {
      this.$router.push('/kefyliaotian')
    },
    onSearch () {
      console.log('收缩')
    },
    oneshouye () {
      this.$router.push('/shouye')
    },
    twozhengfu () {
      this.$router.push('/zhengfu')
    },
    threeqiyefuwu () {
      this.$router.push('/qiyefuwu')
    },
    fourpepo () {
      this.$router.push('/pepo')
    },
    fivemy () {
      this.$router.push('/wode')
    },
    // 不好意思,数据库在更新目前不能查看
    genduoremen () {
      Dialog.alert({
        message: '不好意思,数据库在更新目前不能查看'
      }).then(() => {
        // on close
      })
    },
    zfzhaozbtn1bomone () {
      this.$router.push('/remendata')
    }
  }
}
</script>
<style lang="less">
*{
  margin: 0;
  padding: 0;
  border-top:1px solid transparent

}
.big{
  position:relative;
  width:100%;
  // min-height:100%;
height: 172vh;
  .shoutop{
  display: flex;
  width: 100%;
  height: 45px;
  line-height: 60px;
  background-color:#29a8e3;
  position:absolute;
  // margin-bottom: 100px;
.shoutopleft{
  margin-left: 6px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  // background-color: #fff;
  // margin-top: 10px;
}
.shoutopcenter{
  // display: flex;
width: 260px;
height: 45px;
// background-color: pink;
// .sousuobatn{
//   width: 30px;
//   height: 30px;
//   line-height: 20px;
//   margin-top: 10px;
//   background-color: pink;
// }
}
.shoutopright{
  // margin-right: -200px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  // background-color: #fff;
}
}
.shoucenter{
  margin-top: 50px;
height: 100vh;
}
.shoubom{
  display: flex;
  margin-top: 50px;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color:#29a8e3;
  bottom: 0;
  position:absolute;

.shoubomone{
  margin: 0 10px 0 0;
  width: 60px;
  color: 60px;
// background-color: pink;
}
}

}
.my-swipe .van-swipe-item {
  height: 200px;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    // background-color: #39a9ed;
  }
  .weiwei1{
    width: 100%;
    height: 200px;
    background-color: #cccccc;
  }
.qiyezhaozhu{
  display: flex;
  // background-color: pink;
  font-size: 18px;
  color: #29a8e3;
  .qiyezhaozhuleft{
    padding-left: 8px;
  }
  .qiyezhaozhuright{
    margin-left: 230px;
  }
}
.qiyezhaozhuxinxi{
  width: 100%;
}
.qiyehuodongxinxi{
  display: flex;
  width: 100%;
  // background-color: pink;
  font-size: 18px;
  color: #29a8e3;
  margin-top: 8px
  ;
  .qiyehuodongxinxileft{
    padding-left: 8px;
  }
  .qiyehuodongxinxiright{
    margin-left: 230px;
  }
}
</style>
